<template>
  <div class="min-h-screen">
    <header class="relative overflow-hidden">
      <div class="absolute inset-0 bg-solo-gradient"></div>
      <nav class="relative z-10 container-fluid flex items-center justify-between py-6 text-white/90">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center ring-1 ring-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
              <path d="M10.5 2.75a7.75 7.75 0 0 1 7.75 7.75v.75h.25a2.75 2.75 0 1 1 0 5.5H10.5a7.75 7.75 0 1 1 0-15Z" />
              <path d="M4.5 17.75a2.75 2.75 0 0 0 2.75 2.75h11a2.75 2.75 0 0 0 2.75-2.75v-1a.75.75 0 0 0-.75-.75h-15a.75.75 0 0 0-.75.75v1Z" />
            </svg>
          </div>
          <div class="text-base font-semibold tracking-wide">鲜果优选</div>
        </div>
        <div class="hidden md:flex items-center gap-6 text-sm">
          <router-link class="hover:underline/60" to="/">首页</router-link>
          <router-link class="hover:underline/60" :to="{ path: '/', hash: '#categories' }">分类</router-link>
          <router-link class="hover:underline/60" :to="{ path: '/', hash: '#products' }">推荐</router-link>
          <router-link class="hover:underline/60" to="/products">全部商品</router-link>
          <router-link class="hover:underline/60" :to="{ path: '/', hash: '#contact' }">联系我们</router-link>
        </div>
        <div class="flex items-center gap-3">
          <router-link :to="auth.isLoggedIn ? '/account' : '/login'" class="btn-outline flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.5 20.25a8.25 8.25 0 1 1 15 0v.75H4.5v-.75Z" />
            </svg>
            <span>{{ auth.isLoggedIn ? (auth.user?.name || '我的') : '登录' }}</span>
          </router-link>

          <button class="btn-outline relative" @click="drawerOpen = true">
            购物车
            <span v-if="cartCount>0" class="absolute -top-2 -right-2 min-w-[20px] h-[20px] px-1 rounded-full bg-emerald-500 text-white text-xs flex items-center justify-center">{{ cartCount }}</span>
          </button>
        </div>
      </nav>

      <section v-if="showHero" class="relative z-10 py-6 md:py-10">
        <Carousel />
      </section>
    </header>

    <main class="container-fluid py-16 text-white/90">
      <Transition name="fade-slide" mode="out-in">
        <router-view />
      </Transition>
      <div class="divider"></div>
    </main>

    <ToastHost />
    <button v-show="showBackTop" class="back-to-top hover-float" @click="scrollToTop" aria-label="回到顶部">↑</button>
    <CartDrawer v-model:open="drawerOpen" />

    <footer id="contact" class="border-t border-white/10">
      <div class="container-fluid py-10 grid md:grid-cols-4 gap-8 text-sm text-white/70">
        <div>
          <div class="font-semibold text-white">鲜果优选</div>
          <p class="mt-3">全球好水果，次日达。客服：400-888-8888</p>
        </div>
        <div>
          <div class="font-semibold text-white">帮助</div>
          <ul class="mt-3 space-y-2">
            <li>配送说明</li>
            <li>退换政策</li>
            <li>优惠活动</li>
          </ul>
        </div>
        <div>
          <div class="font-semibold text-white">关于我们</div>
          <ul class="mt-3 space-y-2">
            <li>品牌故事</li>
            <li>加入我们</li>
            <li>联系我们</li>
          </ul>
        </div>
        <div>
          <div class="font-semibold text-white">订阅最新优惠</div>
          <div>
            <SubscriptionForm />
          </div>
        </div>
      </div>
      <div class="text-center text-white/40 text-xs py-6">© 2025 鲜果优选 All rights reserved.</div>
    </footer>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import Carousel from './components/Carousel.vue'
import ToastHost from './components/ToastHost.vue'
import CartDrawer from './components/CartDrawer.vue'
import { useAuthStore } from './stores/auth'
import SubscriptionForm from './components/SubscriptionForm.vue'

const auth = useAuthStore()

const route = useRoute()
const showHero = computed(() => route.meta?.homeHero === true)

const drawerOpen = ref(false)
const cartCount = ref(0)
const showBackTop = ref(false)

function refreshCart(){
  try{
    const arr = JSON.parse(localStorage.getItem('cart')||'[]')
    cartCount.value = arr.reduce((s,x)=> s + (x.qty||0), 0)
  }catch{ cartCount.value = 0 }
}

function handleScroll(){
  if(typeof window !== 'undefined'){
    showBackTop.value = window.scrollY > 200
  }
}

function scrollToTop(){ window.scrollTo({ top: 0, behavior: 'smooth' }) }

onMounted(() => {
  refreshCart()
  handleScroll()
  window.addEventListener('cart-updated', refreshCart)
  window.addEventListener('scroll', handleScroll, { passive: true })
})

onBeforeUnmount(() => {
  window.removeEventListener('cart-updated', refreshCart)
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
</style>
